<template>
    <div class="il-product-list" v-if="products_info">
        <div class="il-product-item" v-for="l in products_info">
            <router-link :to="'/detaillist/'+l.product_id">
                <div class="il-product-img">
                    <img :src="l.image | imageFilter">
                </div>
                <div class="il-product-info">
                    <h4 class="il-info-title">{{l.product_name}}</h4>
                    <div class="il-info-wrap">
                        <div class="il-info-tag">
                            <span v-if="l.auto_confirm" class="confirm">即时确认</span>
                            <span  v-if="l.is_promotion" class="tuan">团</span>
                            <span v-if="l.is_special" class="te">特</span>
                        </div>
                        <div class="il-info-count">
                            已售&nbsp;{{l.order_count}}
                        </div>
                        <div class="il-info-price">
                            <span>￥</span>
                            <span class="il-info-price-value">{{l.default_price}}</span>
                            <span>起</span>
                        </div>
                    </div>
                </div>
            </router-link>
            <div class="il-product-special" v-if="l.special_price">{{l.special_price | discount(l.default_price)}}<span>折</span></div>
        </div>
    </div>
</template>
<script>
    export default{
        props:['products_info'],
        filters:{
            discount:function(value1,value2){
                return 10*(value1/value2).toFixed(2)
            }
        }
    }
</script>

<style>
    .il-product-list{
        padding: 24px;
    }
    .il-product-item{
        padding: 0;
        margin-bottom: 24px;
        background-color: #fff;
        border: none;
        height: auto;
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid #e0e0e0;
    }
    .il-product-img{
        width: 100%;
        min-height: 49px;
        margin-right: 16px;
        background-image: url(../assets/image/lazy.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .il-product-img img{
        width:100%;
        vertical-align: middle;
        max-height: 51vw;
        margin: 0;
        border: 0;
    }
    .il-product-info .il-info-title{
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 24px 12px;
        font-size: 14px;
        color: #363636;
    }
    .il-info-wrap{
        margin: 0 12px 24px 12px;
        display: flex;
        height: 16px;
        padding-top: 3px;
        font: 12px Helvetica Neue Regular;
        color: #363636;
    }
    .il-info-tag{
        height: 16px;
        margin-top: -1px;
        font-size:12px;
        color: #fff;
    }
    .il-info-tag span{
        height: 16px;
        display: inline-block;
        text-align: center;
        margin-right: 12px;
    }
    .il-info-tag .tuan,.il-info-tag .te{
        width: 20px;
        background: #fb5f10;
    }
    .il-info-tag .confirm{
        width: 60px;
        background: #0090f2;
    }
    .il-info-count{
        flex: 1;
        margin-top: -2px;
        height: 18px;
        color: #b4b4b4;
        line-height: 18px;
    }
    .il-info-price{
        font-size: 12px;
        line-height: 8px;
        text-align: right;
        color: #fb5f10;
    }
    .il-info-price span:nth-of-type(3){
        color: #363633;
    }
    .il-info-price-value{
        font-size: 24px;
        font-weight: bold;
    }
    .il-product-special{
        width: 48px;
        height: 48px;
        position: absolute;
        display: block;
        top: 12px;
        left: 12px;
        background-color: #363636;
        border-radius: 50%;
        color: #FFF;
        line-height: 48px;
        font-weight: 600;
        font-size: 18px;
        text-align: center;
    }
    .il-product-special span{
        font-size:12px;
    }
</style>